<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>医药管理系统后台登录</title>
	<meta name="renderer" content="webkit">	
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">	
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">	
	<meta name="apple-mobile-web-app-capable" content="yes">	
	<meta name="format-detection" content="telephone=no">	
	<!-- load css -->
	<link rel="stylesheet" type="text/css" href="common/layui/css/layui.css" media="all">
	<link rel="stylesheet" type="text/css" href="css/login.css" media="all">
</head>
<body>
<div class="layui-canvs"></div>
<form id="loginForm">
<div class="layui-layout layui-layout-login">
	<h1>
		 <strong>医药管理系统</strong>
		 <em>Management System</em>
	</h1>
	<div class="layui-user-icon larry-login">
		 <input id="account" name="account" type="text" placeholder="账号" class="login_txtbx"/>
	</div>
	<div class="layui-pwd-icon larry-login">
		 <input id="password" name="password" type="password" placeholder="密码" class="login_txtbx"/>
	</div>
    <div class="layui-val-icon larry-login">
    	<div class="layui-code-box">
    		<input type="text" id="code" name="code" placeholder="验证码" maxlength="4" class="login_txtbx">
			<!--使用canvas画出验证码-->
			<canvas  id="verifyImg"  class="verifyImg" width="120.5px" height="41px" onclick="tochange()"></canvas>
           <!-- <img src="images/verifyimg.png" alt="" class="verifyImg" id="verifyImg" onClick="javascript:this.src='xxx'+Math.random();">-->
    	</div>
    </div>
    <div class="layui-submit larry-login">
    	<input type="button" value="立即登陆" class="submit_btn" onclick="tologin()"/>
    </div>
    <div class="layui-login-text">
        <p id="logintoregister" style="color: red" onclick="toregister()" onmouseover="tobig()" onmouseout="tosmall()">没有账号?去注册</p>
		<p>© 2021-2022 木易 版权所有</p>
    </div>
</div>
</form>
<script type="text/javascript" src="common/layui/lay/dest/layui.all.js"></script>
<script type="text/javascript" src="js/login.js"></script>
<script type="text/javascript" src="jsplug/jparticle.jquery.js"></script>
<!--将token写入cookie-->
<script type="text/javascript" src="jsplug/jquery.cookie.js"></script>
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script src="js/token.js"></script>
<script type="text/javascript">
	/*登录验证之前需要验证码验证
	验证码验证成功之后再调用登陆验证
	* */

	var outyzmfz="";//定义一个全局变量,在生成验证码时将验证码记录下来
	var inaccount = document.getElementById("account");
	var inpassword = document.getElementById("password");
	function tologin() {
		var inYZM = document.getElementById("code").value;
		var A=new String(inYZM);
		var B=new String(outyzmfz);
		console.log(outyzmfz);
		if (inaccount.value != "" && inpassword.value != "" ) {
			//验证码输入正确
			if (A.localeCompare(B) == 0) {
				tologinback();
			} else {
				/*输入错误后将文本框置空*/
				var nr = document.getElementById("code").value = "";
				layer.open({
					title: '警告'
					, content: '验证码输入错误,请重新输入'
				});
				tochange();

			}
		}else {
			layer.open({
				title: '警告'
				, content: '账号密码不能为空,请输入'
			});

		}

		var nr=document.getElementById("code").innerHTML="1111";
		console.log(nr);
	}
	/**
	 * 登录验证
	 */
	function  tologinback(){
		$.post("/login/login",$("#loginForm").serialize(),function(res){
			if (res.code == 201 ||res.code == 500){
				alert(res.msg);
			}else if (res.code == 200){
				//登录成功将用户账号存放在浏览器中
				$.cookie("token",res.data.token);
				document.cookie="token="+res.data.token;
				//var lastname = sessionStorage.getItem("account");读取语法
				window.sessionStorage.setItem("token",res.data.token);
				window.sessionStorage.setItem("account",res.data.account);
				window.sessionStorage.setItem("id",res.data.id);
				location.replace("index.html");
			}
		},"json");
	}

$(function(){
	$(".layui-canvs").jParticle({
		background: "#141414",
		color: "#E6E6E6"
	});
});




	/*登陆页面跳转到注册页面函数*/
	function toregister(){
		location.replace("register.html")
	}

	/*鼠标悬停,注册的跳转链接改变*/
	function tobig(){
	var  registerobj =document.getElementById("logintoregister");
		registerobj.style.color="blue";
		registerobj.innerHTML="点击一下,进入注册页面";
	}
	/*鼠标离开,注册的跳转链接改变*/
	function tosmall(){
		var  registerobj =document.getElementById("logintoregister");
		registerobj.style.color="red"
		registerobj.innerHTML="没有账号?去注册";

	}




	/* 验证码函数 */
	function YZM(selector,w,h){
		/* 生成随机数的函数 */
		function rn(min,max){
			return parseInt(Math.random()*(max-min)+min);
		}
		/*随机生成颜色的函数*/
		function rc(min,max){
			var r=rn(min,max);
			var g=rn(min,max);
			var b=rn(min,max);
			return `rgb(${r},${g},${b})`
		}
		/* 设置背景 */
		var w=w;
		var h=h;
		var canvas=document.querySelector(selector);
		var ctx=canvas.getContext('2d');
		/*在canvas上绘制背景颜色*/
		ctx.fillStyle=rc(180,230);
		ctx.fillRect(0,0,w,h);
		//随机字符串
		var pool='ABCDEFGHIGKLMNOPQRSTUVWXYZ1234567890';
		for(var i=0;i<4;i++){
			/* 取出随机的字母或数字 */
			var c=pool[rn(0,pool.length)]
			/* 设置随机数字体大小 */
			var fs=rn(18,40);
			//设置随机数旋转角度
			var deg=rn(-30,30);
			/* 设置字体格式 */
			ctx.font=fs+'px Simhei';
			ctx.textBaseline='top'
			/* 设置字体填充颜色 */
			ctx.fillStyle=rc(80,150);
			ctx.save();
			ctx.translate(30*i+15,15);
			ctx.rotate(deg*Math.PI/180);
			ctx.fillText(c,-10,-10)
			ctx.restore();
			outyzmfz+=c;
		}

		/* 随机生成干扰线 */
		for(var i=0;i<5;i++){
			ctx.beginPath()
			ctx.moveTo(rn(0,w),rn(0,h));
			ctx.lineTo(rn(0,w),rn(0,h));
			ctx.strokeStyle=rc(180,230);
			ctx.closePath();
			ctx.stroke();
		}
		/* 随机产生四十个干⚪点 */
		for(var i=0;i<40;i++){
			ctx.beginPath();
			ctx.arc(rn(0,w),rn(0,h),1,0,2*Math.PI);
			ctx.closePath();
			ctx.fillStyle=rc(150,200);
			ctx.fill();
		}

	}
	YZM('#verifyImg',120,40);
	function tochange(){
		//每刷新一次重新记录验证码
		outyzmfz="";
		YZM('#verifyImg',120,40);
	}

</script>
</body>
</html>